<!-- 主要内容区域 -->

<template>
    <div id="container">
        <main id="main">
            <Menu/>
            <Menu/>
            <Menu/>
        </main>
        <footer>
            <div>
                AlexZENG || 团队介绍
            </div>
            <div>
                版权归 XXXXX 所有
            </div>
        </footer>
    </div>
</template>

<script>
    import Menu from './Menu.vue';
    export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "Container",
    components: { Menu }
}
</script>

<style>
    #container {
        padding: 5px;
        margin-top: 1rem;
        border: 1px solid red;
        display: flex;
        flex-direction: column;
        width: 80%;
        height: 30rem;
        margin-left: auto;
        margin-right: auto;
    }

    #main {
        height: 20rem;
        overflow: scroll;;
    }

    footer {
        text-align: center;
        margin-top: 1rem;
        line-height: 1.5rem;
    }



</style>